<template>
  <div class="workorders-container">
    <!-- <h2 class="page-title">工作单列表</h2> -->

    <!-- 雇主签名审核弹窗 -->
    <el-dialog v-model="signDialogVisible" title="審査" width="90%">
      <div v-if="currentOrder" class="sign-dialog-content">
        <div class="contract-section">
          <h3>契约書をお読みください:</h3>
          <div class="contract-content" v-html="currentOrder.content"></div>
        </div>

        <div class="sign-instruction">
          <div class="signature-area">
            <div class="signature-title">
              <h3>右側に署名してください:</h3>
            </div>
            <div class="signature-content">
              <div class="signature-canvas-container">
                <canvas ref="signatureCanvas" class="signature-canvas" @mousedown="startDrawing" @mousemove="draw"
                  @mouseup="stopDrawing" @mouseleave="stopDrawing" @touchstart="handleTouchStart"
                  @touchmove="handleTouchMove" @touchend="stopDrawing"></canvas>
              </div>
              <div class="signature-controls">
                <el-button type="primary" size="small" @click="clearSignature" style="background-color: #409EEF; border-color: #409EEF; width: 100px; height: 32px;">署名を消去</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer" style="display: flex; justify-content: center; width: 100%;">
          <el-button @click="signDialogVisible = false">キャンセル</el-button>
          <el-button type="primary" @click="submitSignature" :disabled="!hasSignature" style="background-color: #409EEF; border-color: #409EEF;">確認</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog v-model="dialogVisible" title="詳細を見る" width="90%">
      <div v-if="currentOrder" class="order-detail">

        <div class="detail-item">
          <!-- 工作名称 -->
          <span class="label">タイトル：</span>
          <span class="value">{{ currentOrder.jobs_name }}</span>
        </div>
        <div class="detail-item">
          <!-- 申请时间 -->
          <span class="label">申請時間：</span>
          <span class="value">{{ currentOrder.createtime }}</span>
        </div>
        <div class="detail-item">
          <!-- 开始日期 -->
          <span class="label">作業開始日：</span>
          <span class="value">{{ currentOrder.start_time }}</span>
        </div>
        <div class="detail-item">
          <!-- 完成日期 -->
          <span class="label">作業終了日：</span> 
          <span class="value">{{ currentOrder.end_time }}</span>
        </div>
        <div class="detail-item">
          <!-- 状态 -->
          <span class="label">状態：</span>
          <span class="value">
          
              {{ getStatusText(currentOrder.status) }}
          
          </span>
        </div>
        <div class="detail-item">
          <!-- 公司名称 -->
          <span class="label">会社名：</span>
          <span class="value">{{ currentOrder.company_name }}</span>
        </div>
        <div class="detail-item">
          <!-- 身份 -->
          <span class="label">氏名：</span>
          <span class="value">{{ currentOrder.jobs_user_id }}</span>
        </div>
        <div class="detail-item">
          <!-- 联系电话 -->
          <span class="label">連絡先：</span>
          <span class="value">{{ currentOrder.phone }}</span>
        </div>
        <div class="detail-item">
          <!-- 地址 -->
          <span class="label">住所：</span>
          <span class="value">{{ currentOrder.address }}</span>
        </div>
        <div class="detail-item">
          <!-- 预期报酬 -->
          <span class="label">希望報酬：</span>
          <span class="value">{{ currentOrder.expected_reward }}</span>
        </div>
        <div class="detail-item">
          <!-- 交付数量 -->
          <span class="label">納品数量：</span>
          <span class="value">{{ currentOrder.delivery_quantity }}</span>
        </div>
        <div class="detail-item">
          <!-- 交付时间 -->
          <span class="label">納品時間（月）：</span> 
          <span class="value">0
            <!-- {{ formatAmount(currentOrder.expected_reward) }} -->
          </span>
        </div>
        <div class="detail-item">
          <!-- 状态 -->
          <span class="label">州：</span>
          <span class="value">
            合格
            <!-- <el-tag :type="getStatusType(currentOrder.status)">
              {{ getStatusText(currentOrder.status) }}
            </el-tag> -->
          </span>
        </div>


<!--         
        <div class="detail-item">
          <span class="label">申請者 :</span>
          <span class="value">{{ currentOrder.name }}</span>
        </div>
        <div class="detail-item">
          <span class="label">申请数量:</span>
          <span class="value">{{ currentOrder.delivery_quantity }}</span>
        </div> -->

        <!-- 签名区域 -->
        <div class="signature-section">
          <div class="signature-container">
            <div class="signature-item" v-if="currentOrder.user_sign">
              <div class="signature-row">
                <div class="signature-label">乙方（インフルエンサー）名前 ：</div>
                <div class="signature-image">
                  <img :src="formatImageUrl(currentOrder.user_sign)" alt="用户签名" />
                </div>
              </div>
            </div>
            
            <div class="signature-item" v-if="currentOrder.jobs_user_sign">
              <div class="signature-row">
                <div class="signature-label">甲方（ブランド側）名前 ：</div>
                <div class="signature-image">
                  <img :src="formatImageUrl(currentOrder.jobs_user_sign)" alt="雇主签名" />
                </div>
              </div>
            </div>
          </div>
        </div>

        
        <!-- 合同内容 -->
        <div class="contract-section" v-if="currentOrder.content">
          <div class="contract-row">
            <span class="contract-label">契約 ：</span>
            <div class="contract-content" v-html="currentOrder.content"></div>
          </div>
        </div>




      </div>
    </el-dialog>

    <!-- 表格 -->
    <div class="table-wrapper">
      <el-table :data="orderList" style="width: fit-content; font-size: 14px;" stripe v-loading="loading" class="custom-table">
      <el-table-column prop="jobs_name" label="名称" width="120" show-overflow-tooltip header-align="left" align="left" />
      <el-table-column prop="company_name" label="会社名"  show-overflow-tooltip width="120" header-align="left" align="left" />
      <el-table-column prop="name" label="申請者氏名" width="120" header-align="left" align="left" />
      <el-table-column prop="createtime" label="応募時間" width="100" header-align="left" align="left" />
      <el-table-column prop="address" label="住所" width="100" show-overflow-tooltip header-align="left" align="left" />
      <el-table-column prop="start_time" label="作業開始日" width="100" header-align="left" align="left" />
      <el-table-column prop="end_time" label="作業終了日" width="100" header-align="left" align="left" />
      <el-table-column prop="delivery_quantity" label="申請数量" width="120" header-align="left" align="left" />
      <el-table-column prop="expected_reward" label="報酬" width="100" header-align="left" align="left">
        <template #default="scope">
          {{ scope.row.expected_reward }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状態" width="100" header-align="left" align="left">
        <template #default="scope">
          
            {{ getStatusText(scope.row.status) }}
         
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140" header-align="left" align="left">
        <template #default="scope">
          <!-- 共同按钮 -->
          <div class="button-group">
            <el-button type="primary" size="small" @click="viewDetails(scope.row)" style="background-color: #409eff;width: 50px;margin-left: 10px;">
              閲覧
            </el-button>
            <!-- 非公司账号按钮 -->
            <el-button v-if="!isCompanyAccount" @click="showTip" type="success"
              size="small"  style="background-color: #409eff;">
             契約受領書
            </el-button>
              <!-- 公司账号按钮 -->
            <el-button v-if="isCompanyAccount && (scope.row.status === 0 || scope.row.status === 1)" type="success"
              size="small" @click="showSignDialog(scope.row)" style="background-color: #409eff;width: 50px;margin-left: 10px;">
            審査
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

      <!-- 移动端卡片列表 -->
      <div class="mobile-card-list" v-loading="loading">
        <div v-for="order in orderList" :key="order.id" class="mobile-card">
          <div class="card-header">
            <div class="card-title">
              <h3>{{ order.jobs_name }}</h3>
            </div>
          </div>
          <div class="card-actions">
            <span
              type="primary" 
              size="small" 
              @click="viewDetails(order)"
              style="color: #67C23A;">
              閲覧
            </span>
            <el-button 
              v-if="!isCompanyAccount" 
              @click="showTip" 
              type="primary"
              size="small" 
              class="action-btn contract-btn">
              契約受領書
            </el-button>
            <el-button 
              v-if="isCompanyAccount && (order.status === 0 || order.status === 1)" 
              type="primary"
              size="small" 
              @click="showSignDialog(order)"
              class="action-btn review-btn">
              審査
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" 
        :prev-text="'前へ'"
        :next-text="'次へ'"
        :page-size-text="'件/ページ'"
        :total-text="'合計 {total} 件'"
        :jumper-text="'ページへ移動'" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { orderApi, commonApi } from '../../../api/index'

// 数据列表
const orderList = ref([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 判断是否为公司账号（type=2）
const isCompanyAccount = computed(() => {
  try {
    const userInfoStr = localStorage.getItem('userInfo')
    if (userInfoStr) {
      const userInfo = JSON.parse(userInfoStr)
      return userInfo.type === 2
    }
    return false
  } catch (error) {
    console.error('获取用户信息失败:', error)
    return false
  }
})

// 详情弹窗
const dialogVisible = ref(false)
const currentOrder = ref(null)

// 签名弹窗
const signDialogVisible = ref(false)
const signatureCanvas = ref(null)
const isDrawing = ref(false)
const hasSignature = ref(false)
const lastX = ref(0)
const lastY = ref(0)

// 获取工单列表
const getOrderList = async () => {
  loading.value = true
  try {
    const res = await orderApi.getOrderList({
      page: currentPage.value,
      limit: pageSize.value
    })

    if (res.code === 1 && res.data) {
      orderList.value = res.data.list || []
      total.value = parseInt(res.data.totalCount) || 0
    } else {
      ElMessage.error(res.msg)
    }
  } catch (error) {
    console.error(error)
    ElMessage.error(res.msg)
  } finally {
    loading.value = false
  }
}

// 处理页码变化
const handleCurrentChange = (page) => {
  currentPage.value = page
  getOrderList()
}

// 处理每页条数变化
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  getOrderList()
}

const showTip = () => {
  ElMessage.error('この注文の報酬を引き出してから、再送信を選択してください。')
}
// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '署名される',
    1: '審査待ち',
    2: '完成する',
    3: '拒否済み'
  }
  return statusMap[status] || '未知状态'
}

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    0: 'warning',
    1: 'success',
    2: 'info',
    3: 'danger'
    
  }
  return typeMap[status] || ''
}

// 查看详情
const viewDetails = async (row) => {
  loading.value = true
  try {
    const res = await orderApi.getOrderInfo(row.id)
    if (res.code === 1 && res.data) {
      currentOrder.value = res.data
      dialogVisible.value = true
    } else {
      ElMessage.error(res.msg || '获取工单详情失败')
    }
  } catch (error) {
    console.error('获取工单详情失败:', error)
    ElMessage.error('获取工单详情失败')
  } finally {
    loading.value = false
  }
}

// 格式化图片URL，拼接域名
const formatImageUrl = (url) => {
  if (!url) return ''
  // 如果已经是完整URL（包含http或data:开头），则直接返回
  if (url.startsWith('http') || url.startsWith('data:')) {
    return url
  }
  // 否则拼接域名
  return `https://58.dt12.cfd${url}`
}

// 格式化金额，添加千位分隔符
const formatAmount = (amount) => {
  if (!amount && amount !== 0) return ''
  return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') 
}

// 显示签名弹窗
const showSignDialog = async (row) => {
  // ElMessage.error('この注文の報酬を引き出してから、再送信を選択してください。')
  loading.value = true
  try {
    const res = await orderApi.getOrderInfo(row.id)
    if (res.code === 1 && res.data) {
      currentOrder.value = res.data
      signDialogVisible.value = true

      // 初始化签名画布
      setTimeout(() => {
        initSignatureCanvas()
      }, 100)
    } else {
      ElMessage.error(res.msg || '获取工单详情失败')
    }
  } catch (error) {
    console.error('获取工单详情失败:', error)
    ElMessage.error('获取工单详情失败')
  } finally {
    loading.value = false
  }
}

// 初始化签名画布
const initSignatureCanvas = () => {
  if (!signatureCanvas.value) return

  const canvas = signatureCanvas.value
  const ctx = canvas.getContext('2d')

  // 设置画布尺寸
  canvas.width = canvas.offsetWidth
  canvas.height = canvas.offsetHeight

  // 设置画布背景为白色
  ctx.fillStyle = '#fff'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  // 设置线条样式
  ctx.lineWidth = 2
  ctx.lineCap = 'round'
  ctx.lineJoin = 'round'
  ctx.strokeStyle = '#000'

  hasSignature.value = false
}

// 开始绘制
const startDrawing = (e) => {
  isDrawing.value = true
  const canvas = signatureCanvas.value
  const rect = canvas.getBoundingClientRect()
  lastX.value = e.clientX - rect.left
  lastY.value = e.clientY - rect.top
}

// 处理触摸开始事件
const handleTouchStart = (e) => {
  e.preventDefault()
  if (e.touches.length === 1) {
    const touch = e.touches[0]
    const canvas = signatureCanvas.value
    const rect = canvas.getBoundingClientRect()
    lastX.value = touch.clientX - rect.left
    lastY.value = touch.clientY - rect.top
    isDrawing.value = true
  }
}

// 处理触摸移动事件
const handleTouchMove = (e) => {
  e.preventDefault()
  if (!isDrawing.value) return
  if (e.touches.length === 1) {
    const touch = e.touches[0]
    const canvas = signatureCanvas.value
    const rect = canvas.getBoundingClientRect()
    const x = touch.clientX - rect.left
    const y = touch.clientY - rect.top
    drawLine(lastX.value, lastY.value, x, y)
    lastX.value = x
    lastY.value = y
    hasSignature.value = true
  }
}

// 绘制
const draw = (e) => {
  if (!isDrawing.value) return

  const canvas = signatureCanvas.value
  const rect = canvas.getBoundingClientRect()
  const x = e.clientX - rect.left
  const y = e.clientY - rect.top

  drawLine(lastX.value, lastY.value, x, y)

  lastX.value = x
  lastY.value = y
  hasSignature.value = true
}

// 绘制线条
const drawLine = (x1, y1, x2, y2) => {
  const ctx = signatureCanvas.value.getContext('2d')
  ctx.beginPath()
  ctx.moveTo(x1, y1)
  ctx.lineTo(x2, y2)
  ctx.stroke()
}

// 停止绘制
const stopDrawing = () => {
  isDrawing.value = false
}

// 清除签名
const clearSignature = () => {
  const canvas = signatureCanvas.value
  const ctx = canvas.getContext('2d')
  ctx.fillStyle = '#fff'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  hasSignature.value = false
}

// 提交签名
const submitSignature = async () => {
  if (!hasSignature.value) {
    ElMessage.warning('请先签名')
    return
  }

  try {
    loading.value = true

    // 将画布内容转换为base64图片
    const base64Data = signatureCanvas.value.toDataURL('image/png')

    // 将base64转换为Blob对象
    const byteString = atob(base64Data.split(',')[1])
    const mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]
    const ab = new ArrayBuffer(byteString.length)
    const ia = new Uint8Array(ab)

    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i)
    }

    // 创建File对象
    const signatureFile = new File([new Blob([ab], { type: mimeString })], 'signature.png', { type: mimeString })

    // 上传签名图片
    const uploadRes = await commonApi.upload(signatureFile)

    if (uploadRes.code !== 1) {
      throw new Error(uploadRes.msg || '签名图片上传失败')
    }

    // 获取上传后的图片路径
    const signatureUrl = uploadRes.data.url

    // 提交签名到服务器
    const res = await orderApi.jobsSign({
      order_id: currentOrder.value.id,
      jobs_user_sign: signatureUrl // 使用上传后的图片URL而不是base64
    })

    if (res.code === 1) {
      ElMessage.success('署名の確認に成功しました')
      signDialogVisible.value = false
      getOrderList() // 刷新列表
    } else {
      ElMessage.error(res.msg || '署名の確認に失敗しました')
    }
  } catch (error) {
    console.error('签名审核失败:', error)
    ElMessage.error(error.message || '署名の確認に失敗しました')
  } finally {
    loading.value = false
  }
}

// 页面加载时获取工单列表
onMounted(() => {
  getOrderList()
})
</script>

<style scoped>
/* 自定义表格样式 */
.custom-table {
  /* border-radius: 8px; */
  overflow: hidden;
}

.custom-table :deep(.el-table__header-wrapper) {
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
}

.custom-table :deep(.el-table__header th .cell) {
  color: white !important;
  font-size: 14px;
  text-align: left;
}

.custom-table :deep(.el-table__body tr:hover > td) {
  background-color: #f8f9ff !important;
}

.custom-table :deep(.el-table__body td) {
  padding: 8px;
  border-bottom: 1px solid #ebeef5;
  border-right: none;
}

.custom-table :deep(.el-table__header th) {
  background: #468CCB !important;
  color: white !important;
  font-weight: 600;
  border-bottom: none;
  border-right: none;
  padding: 12px 8px;
}

.custom-table :deep(.el-table th.el-table__cell) {
  border-right: none;
}

.custom-table :deep(.el-table td.el-table__cell) {
  border-right: none;
}

.custom-table :deep(.el-table__body td .cell) {
  font-size: 14px;
  text-align: left;
}

.signature-container {
  display: flex;
  flex-direction: column;
  
}

.signature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.signature-image img {
  width: 300px;
  height: 300px;  /* 正方形 */
  object-fit: contain;
  /* border: 1px solid #eee; */
  padding: 5px;
}
.workorders-container {
  padding: 20px;
  margin: 0 auto;
  background-color: #f5f7fa;
  min-height: 100vh;
  position: relative;
}

.mobile-card-list {
  display: none;
}

.table-wrapper {
  font-size: 14px;
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  margin-left: 270px;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 签名弹窗样式 */
.sign-dialog-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sign-instruction {
  margin-top: 20px;
}

.sign-instruction h3 {
  margin-bottom: 15px;
  font-size: 16px;
  color: #303133;
}

.signature-area {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
}

.signature-title {
  flex-shrink: 0;
  width: 200px;
}

.signature-title h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.signature-content {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: flex-start;
}

/* 移动端自适应样式 */
@media (max-width: 768px) {
  .workorders-container {
    padding: 10px;
    position: relative;
  }

  .table-wrapper {
    overflow: visible;
  }

  .custom-table {
    display: none;
  }

  .mobile-card-list {
    display: block;
  }

  .mobile-card {
    /* background: white; */
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 16px;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
    /* border: 1px solid #e8e8e8; */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    flex: 1;
  }

  .card-icon {
    width: 40px;
    height: 40px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 18px;
    color: #666;
  }

  .card-title h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #085591;
    line-height: 1.4;
  }

  .card-title p {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #666;
    line-height: 1.4;
  }

  .card-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-shrink: 0;
  }

  .action-btn {
    border-radius: 4px;
    font-size: 12px;
    padding: 6px 12px;
    min-width: 60px;
  }

  .view-btn {
    background-color: #67c23a;
    border-color: #67c23a;
  }

  .contract-btn {
    background-color: #409eff;
    border-color: #409eff;
  }

  .review-btn {
    background-color: #409eff;
    border-color: #409eff;
  }

  .pagination-container {
    margin-left: 0;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .pagination-container :deep(.el-pagination) {
    flex-wrap: wrap;
    justify-content: center;
  }

  .pagination-container :deep(.el-pagination .el-pager) {
    flex-wrap: wrap;
  }

  .pagination-container :deep(.el-pagination .el-pagination__total),
  .pagination-container :deep(.el-pagination .el-pagination__sizes),
  .pagination-container :deep(.el-pagination .el-pagination__jump) {
    margin: 5px 0;
  }

  /* 弹窗移动端适配 */
  :deep(.el-dialog) {
    width: 95% !important;
    margin: 5vh auto !important;
    max-height: 90vh;
  }

  :deep(.el-dialog__body) {
    padding: 15px;
    max-height: 70vh;
    overflow-y: auto;
  }

  /* 详情弹窗适配 */
  .order-detail {
    padding: 5px;
  }

  .detail-item {
    flex-direction: column;
    margin-bottom: 15px;
  }

  .detail-item .label {
    width: 100%;
    text-align: left;
    margin-bottom: 5px;
    font-weight: 600;
  }

  .detail-item .value {
    padding-left: 0;
  }

  /* 签名区域移动端适配 */
  .signature-row {
    flex-direction: column;
    gap: 10px;
  }

  .signature-label {
    width: 100%;
    text-align: left;
    font-weight: 600;
  }

  .signature-image {
    width: 100%;
    height: auto;
    min-height: 80px;
  }

  .signature-image img {
    max-width: 100%;
    max-height: 120px;
  }

  /* 合同区域移动端适配 */
  .contract-row {
    flex-direction: column;
    gap: 10px;
  }

  .contract-label {
    width: 100%;
    text-align: left;
    padding-top: 0;
    font-weight: 600;
  }

  .contract-content {
    margin-bottom: 10px;
    max-height: 200px;
  }

  /* 签名弹窗适配 */
  .sign-dialog-content {
    gap: 15px;
  }

  .signature-area {
    flex-direction: column;
    gap: 10px;
  }

  .signature-title {
    width: 100%;
  }

  .signature-content {
    flex-direction: column;
    gap: 10px;
  }

  .signature-canvas-container {
    height: 150px;
  }

  .signature-controls {
    justify-content: center;
    margin-top: 10px;
  }
}

@media (max-width: 480px) {
  .workorders-container {
    padding: 5px;
    position: relative;
  }

  .custom-table {
    min-width: 600px;
  }

  .pagination-container :deep(.el-pagination) {
    font-size: 12px;
  }

  .pagination-container :deep(.el-pagination .btn-prev),
  .pagination-container :deep(.el-pagination .btn-next),
  .pagination-container :deep(.el-pagination .el-pager li) {
    min-width: 28px;
    height: 28px;
    line-height: 28px;
  }

  /* 小屏幕弹窗优化 */
  :deep(.el-dialog) {
    width: 98% !important;
    margin: 2vh auto !important;
    max-height: 96vh;
  }

  :deep(.el-dialog__header) {
    padding: 15px 15px 10px;
  }

  :deep(.el-dialog__body) {
    padding: 10px;
    max-height: 75vh;
  }

  :deep(.el-dialog__footer) {
    padding: 10px 15px 15px;
  }

  /* 详情项间距优化 */
  .detail-item {
    margin-bottom: 12px;
  }

  .detail-item .label {
    font-size: 14px;
  }

  .detail-item .value {
    font-size: 14px;
  }

  /* 签名画布小屏优化 */
  .signature-area {
    flex-direction: column;
    gap: 8px;
  }

  .signature-title {
    width: 100%;
  }

  .signature-content {
    flex-direction: column;
    gap: 8px;
  }

  .signature-canvas-container {
    height: 120px;
  }

  /* 合同内容小屏优化 */
  .contract-content {
    max-height: 150px;
    font-size: 14px;
  }

  /* 按钮组优化 */
  :deep(.el-button) {
    font-size: 14px;
    padding: 8px 15px;
  }

  .signature-controls {
    margin-top: 8px;
  }
}

.signature-canvas-container {
  border: 2px dotted #ccc;
  border-radius: 4px;
  background-color: #fff;
  height: 200px;
  width: 500px;
}

.signature-canvas {
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.signature-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-top: 0;
}

/* 详情弹窗样式 */
.order-detail {
  padding: 10px;
}

/* 签名区域样式 */
.contract-section {
  margin-top: 12px;
  /* border-top: 1px solid #ebeef5; */
  padding-top: 20px;
}

.contract-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.contract-label {
  font-size: 1rem;
  width: 220px;
  text-align: right;
  text-wrap: wrap;
  margin: 0;
  color: #303133;
  flex-shrink: 0;
  padding-top: 15px;
  /* font-weight: 300px !important;  */
}

.contract-content {
  flex: 1;
  padding: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #ECECEC;
  margin-bottom: 20px;
  max-height: 300px;
  overflow-y: auto;
}

.signature-section {
  margin-top: 20px;
  /* border-top: 1px solid #ebeef5; */
  padding-top: 20px;
}

.signature-section h3 {
  margin-bottom: 15px;
  font-size: 16px;
  color: #303133;
}

.signature-container {
  display: flex;
  flex-wrap: wrap;
  /* gap: 20px; */
}

.signature-item {
  flex: 1;
  min-width: 200px;
  margin-bottom: 10px;
}

.signature-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.signature-label {
  font-size: 1rem;
  width: 220px;
  text-align: right;
  text-wrap: wrap;
  color: #606266;
  flex-shrink: 0;
}

.signature-image {
  border: 1px solid #dcdfe6;
  /* padding: 10px; */
  border-radius: 4px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 87.33px;
  flex: 1;
  /* 设置统一高度 */
}

.signature-image img {
  max-width: 200px;
  max-height: 130px;
  /* 略小于容器高度，留出内边距 */
  object-fit: contain;
}

.detail-item {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
}

.detail-item .label {
  font-size: 1rem;
  width: 220px;
  text-align: right;
  text-wrap: wrap;
  color: #606266;
}

.detail-item .value {
  flex: 1;
  color: #333;
  padding-left: 20px;
}
</style>